<template>
  <van-field
    v-if="h5"
    v-model="fieldModelText"
    :is-link="!isDetail"
    readonly
    :name="item.options && item.options.name"
    :label="item.options && item.options.label"
    :disabled="item.options && item.options.disabled"
    :placeholder="isDetail ? '' : item.options && item.options.placeholder"
    :clearable="item.options && item.options.clearable"
    :required="item.options && !isDetail && item.options.required"
    :rules="isDetail ? [] : rules"
    :border="false"
    :label-width="item.options?.labelPosition === 'top' ? '100%' : undefined"
    :label-align="(item.options && item.options.labelPosition) || undefined"
    :input-align="(item.options && item.options.inputAlign) || undefined"
    @click="onShowPicker"
  />
  <widget-form-item
    v-else
    :designer="designer"
    :widget-list="widgetList"
    :item="item"
    :rules="isDetail ? [] : rules"
    :index="index"
    :show-message="!isDetail"
  >
    <el-time-picker
      v-if="!isDetail"
      v-model="fieldModel"
      style="display: inline-flex"
      :style="{ width: '100%' }"
      :disabled="item.options && item.options.disabled"
      :readonly="item.options && item.options.readonly"
      :placeholder="item.options && item.options.placeholder"
      :clearable="item.options && item.options.clearable"
      :format="(item.options && item.options.format) || 'HH:mm:ss'"
      value-format="HH:mm:ss"
      :default-value="new Date(2016, 1, 1, 0, 0)"
      :editable="false"
    />
    <div v-else>
      {{ fieldModel }}
    </div>
  </widget-form-item>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-time-picker
      :model-value="currentTime"
      :title="item.options.label"
      :columns-type="columnsType"
      @confirm="onConfirm"
      @cancel="showPicker = false"
    />
  </van-popup>
</template>

<script>
import { ref, computed } from 'vue'
import props from './props'
import field from './field'
import moment from 'moment'

export default {
  name: 'MTime',
  props,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const showPicker = ref(false)

    const currentTime = computed(() => {
      if (props.item.options.format) {
        if (props.item.options.format.indexOf('ss') === -1) {
          return ['00', '00']
        }
      }
      return ['00', '00', '00']
    })
    const columnsType = computed(() => {
      if (props.item.options.format) {
        if (props.item.options.format.indexOf('ss') === -1) {
          return ['hour', 'minute']
        }
      }
      return ['hour', 'minute', 'second']
    })

    const fieldModelText = computed(() => {
      if (props.modelValue) {
        const times = props.modelValue.split(':')
        const time = { hour: times[0], minute: times[1], seconds: times[2] }
        return moment(time).format(props.item.options.format || 'HH:mm:ss')
      }
      return ''
    })

    const onShowPicker = () => {
      const { isDetail } = field(props, emit)
      if (!props.item.options.readonly && !props.item.options.disabled && !isDetail.value) {
        showPicker.value = true
      }
    }

    const onConfirm = ({ selectedValues }) => {
      const time = { hour: selectedValues[0], minute: selectedValues[1], seconds: selectedValues[2] }
      emit('update:modelValue', moment(time).format('HH:mm:ss'))
      showPicker.value = false
    }

    return {
      showPicker,
      currentTime,
      columnsType,
      fieldModelText,
      onShowPicker,
      onConfirm,
      ...field(props, emit)
    }
  }
}
</script>
